// --------------------------------------------分类页面-----------------------------------------------
import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import classify from "../style/classify.module.css";
import { SideBar } from "antd-mobile";
import navIcon1 from "../img/ones.png";
import searchIcon from "../img/fangbigjing.png";
import navIcon2 from "../img/four.png";
import navIcon3 from "../img/10019.png";
import navIcon4 from "../img/twos.png";
import navIcon5 from "../img/threes.png";
import background from '../img/background.jpg'
import { type } from "../api/type";

function ClassifyPage() {
  const navigate = useNavigate();

  interface TabItem {
    id: string | number;
    title: string;
    list: Array<{
      id: string | number;
      title: string;
      [key: string]: any; // 其他可能的属性
    }>;
  }

  const [tabs, setTabs] = useState<TabItem[]>([]);
  const [activeKey, setActiveKey] = useState<string>("");
  console.log(activeKey);

  useEffect(() => {
    type().then((res) => {
        console.log(res.data.data, "分类数据");
        const myData = res.data.data;
        setTabs(myData);
        const typeID = localStorage.getItem("id") ?? ""; // 分类id
        console.log("当前分类的id为", typeID);
        // 默认选中第一个分类
        if (myData.length > 0 && typeID == "99") {
          console.log(myData[0].id);
          setActiveKey(myData[0].id);
        } else if (myData.length > 0 && typeID !== "99") {
          setActiveKey(typeID);
        }
      })
      .catch((error) => {
        console.error("获取分类数据失败:", error);
      });
  }, []);

  const handleTabChange = (key: string) => {
    setActiveKey(key);
  };
  // 跳转到商品详情
  const handleItemClick = (id: string | number) => {
    localStorage.setItem("productId", id.toString());
    // 跳转到详情页面
    navigate("/detail");
  };
  // 渲染右侧内容区域
  const renderContent = () => {
    const activeTab = tabs.find((tab) => tab.id.toString() === activeKey);

    if (!activeTab || !activeTab.list || activeTab.list.length === 0) {
      return (
        <div className={classify.empty}>
          <img
            src={background}
            alt=""
          />
        </div>
      );
    }
    return (
      <div className={classify.noProducts}>
        {activeTab.list.map((item) => (
          <div
            key={item.id}
            className={classify.item}
            onClick={() => handleItemClick(item.id)}
          >
            <div className={classify.item_img}>
              <img src={item.img} alt="" />
            </div>
            <div className={classify.item_family}>
              <div className={classify.item_title}>{item.title}</div>
              <div className={classify.item_synopsis}>{item.synopsis}</div>
              <div className={classify.item_red}>{item.price}</div>
            </div>
            {/* 这里可以根据需要添加更多内容展示 */}
          </div>
        ))}
      </div>
    );
  };

  if (tabs.length === 0) {
    return <div className={classify.loading}>加载中...</div>;
  }

  return (
    <div className={classify.container}>
      {/* 搜索框 */}
      <div className={classify.bigs}>
        <div className={classify.search} onClick={() => navigate("/search")}>
          <input
            className={classify.searchIn}
            placeholder="请输入您要搜索的内容"
          />
          <img src={searchIcon} alt="搜索" />
        </div>
      </div>
      <div className={classify.main}>
        {/* 左侧导航栏 */}
        <div className={classify.sidebar}>
          <SideBar
            activeKey={activeKey}
            className={classify.nameColor}
            onChange={handleTabChange}
          >
            {tabs.map((tab) => (
              <SideBar.Item key={tab.id} title={tab.title} />
            ))}
          </SideBar>
        </div>
        <div className={classify.item_liu}></div>
        {/* 右侧内容区域 */}
        <div className={classify.content_wrapper}>{renderContent()}</div>
      </div>
      {/* 留白 */}
      <div className={classify.item_di}></div>
      {/* 底部导航栏 */}
      <div className={classify.bottom}>
        <div className={classify.bottom_item} onClick={() => navigate("/home")}>
          <div>
            <img src={navIcon1} alt="首页" />
          </div>
          <p>首页</p>
        </div>
        <div className={classify.bottom_items}>
          <div>
            <img src={navIcon2} alt="分类" />
          </div>
          <p>分类</p>
        </div>
        <div className={classify.punch} onClick={() => navigate("/clock")}>
          <div>
            <div className={classify.punches}>
              <div className={classify.punchs}>
                <img src={navIcon3} alt="打卡" />
              </div>
            </div>
          </div>
          <p>打卡</p>
        </div>
        <div
          className={classify.bottom_item}
          onClick={() => navigate("/shopcart")}
        >
          <div>
            <img src={navIcon4} alt="购物车" />
          </div>
          <p>购物车</p>
        </div>
        <div className={classify.bottom_item} onClick={() => navigate("/me")}>
          <div>
            <img src={navIcon5} alt="我的" />
          </div>
          <p>我的</p>
        </div>
      </div>
    </div>
  );
}

export default ClassifyPage;
